<template>
	<statusBarVue title="需求详情" :isShowBar="true" :isShowLeft="true" />
	<view class="service-details-page" :style="pageHaveBarStyle">
		<uni-list>
			<uni-list-item>
				<template v-slot:header>
					<text>服务方式：</text>
				</template>
				<template v-slot:body>
					<view>
						{{
							waysArr[serviceDetails.method]
						}}
					</view>
				</template>
			</uni-list-item>
			<uni-list-item v-if="serviceDetails.method === 1">
				<template v-slot:header>
					<text>服务地址：</text>
				</template>
				<template v-slot:body>
					<text>{{serviceDetails.serv_addr}}</text>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:header>
					<text>服务时间：</text>
				</template>
				<template v-slot:body>
					<text>{{handleTimeStrToTimeStamp(serviceDetails.at)}}</text>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:header>
					<text>需求类型：</text>
				</template>
				<template v-slot:body>
					<text> 
					{{
						(serviceDetails.service_types).map(index => typeListArr[index]).join('，')
					}}
					</text>
				</template>
			</uni-list-item>
			<uni-list-item v-if="serviceDetails.title">
				<template v-slot:header>
					<text>需求标题：</text>
				</template>
				<template v-slot:body>
					<view>{{ serviceDetails.title }}</view>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:header>
					<text>详细描述:</text>
				</template>
				<template v-slot:body>
					<view>{{serviceDetails.content}}</view>
				</template>
			</uni-list-item>
			<uni-list-item v-if="handleFileList().length">
				<template v-slot:header>
					<text>附件：</text>
				</template>
				<template v-slot:body>
					<view class="files">
						<view class="file" v-for="(v,i) in handleFileList()" :key="i">
							<text @click="handleDownloadFile(v.url)">{{v.name}}</text>
						</view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:header>
					<text>价格：</text>
				</template>
				<template v-slot:body>
					<text>
						{{
							Number(serviceDetails.price) === 0 ?
						'面议' :
							`¥ ${Number(serviceDetails.price).toFixed(2)}`
						}}
					</text>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:header>
					<text>需求截至时间：</text>
				</template>
				<template v-slot:body>
					<text>{{handleTimeStrToTimeStamp(serviceDetails.deadline)}}</text>
				</template>
			</uni-list-item>
		</uni-list>

		<uni-popup ref="popup" type="bottom" borderRadius="16px 16px 0 0" safeArea backgroundColor="#F3F3F5"
			@maskClick="handlePopupClose">
			<view class="popup">
				<view class="popup-h">
					<view class="tit">
						视频预览
					</view>
					<button class="close" @click="handlePopupClose">
						<uni-icons type="closeempty"></uni-icons>
					</button>
				</view>
				<view class="popup-b">
					<video :src="videoSrc" class="video"></video>
				</view>
			</view>
		</uni-popup>
		<view class="submit">
			<!-- <button class="btn-submit" @click="handleWorksheetEnd" >结束工作</button> -->
			<button class="btn-submit" :disabled="serviceDetails.process_ts > 0" @click="handleWorksheetTake"
				v-if="type !== 'end'">申请接单</button>
		</view>
	</view>
</template>


<script>
	import statusBarVue from '@/components/statusBar.vue';

	import {
		postWorksheetTake
	} from '@/utils/api.js';

	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {
				serviceDetails: {},
				type: "",
				videoSrc: ''
			}
		},
		onShareAppMessage() {
			// 监听用户右上角的转发
		},
		onShareTimeline() {
			// 监听用户右上角的分享到朋友圈
		},
		onLoad(options) {
			this.type = options.type;
		},
		created() {
			this.serviceDetails = uni.getStorageSync("workSheetDetails");
			// this.serviceDetails = JSON.parse(sessionStorage.getItem("workSheetDetails"));
		},
		methods: {
			handlePopupClose() {
				this.$refs.popup.close();
			},
			// 文件回显
			handleFileList() {
				const fileListArr = [];
				(this.serviceDetails.attachments).map(item => {
					const index = JSON.parse(item.exif).name.lastIndexOf('.');
					const suffix = JSON.parse(item.exif).name.substring(index + 1);
					fileListArr.push({
						"name": JSON.parse(item.exif).name,
						"extname": suffix,
						"url": item.url
					})
				});
				return fileListArr
			},

			// 文件下载
			handleDownloadFile(url) {
				uni.downloadFile({
					url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.getFileSystemManager().saveFile({
								tempFilePath: res.tempFilePath,
								success: (saveRes) => {
									console.log('文件保存成功，路径：', saveRes.savedFilePath);
									// this.filePath = saveRes.savedFilePath; // 保存到永久路径

									const fileExt = saveRes.savedFilePath.split('.').pop()
										.toLowerCase();

									if (['pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
										.includes(fileExt)) {
										uni.openDocument({
											filePath: saveRes.savedFilePath,
											fileType: fileExt,
											showMenu: true,
											success: (openRes) => {
												console.log('文件打开成功！');
											},
											fail: (err) => {
												console.error('文件打开失败:', err);
												uni.showToast({
													title: '文件打开失败！',
													icon: 'none'
												});
											}
										});
									} else if (['mp4', 'webm', 'm3u8', '3gp'].includes(fileExt)) {
										this.videoSrc = saveRes.savedFilePath;
										this.$refs.popup.open('bottom');
									} else {
										uni.previewImage({
											current: saveRes.savedFilePath, // 当前显示图片的链接
											urls: [saveRes.savedFilePath] // 需要预览的图片链接列表
										});
									}
								},
								fail: (err) => {
									console.error('文件保存失败:', err);
								}
							});
						} else {
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('下载失败:', err);
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			},

			// 申请接单
			handleWorksheetTake() {
				uni.showModal({
					title: '提示',
					content: '确认要申请此单吗？',
					success: (res) => {
						if (res.confirm) {
							postWorksheetTake(this.serviceDetails.id).then(res => {
								if (res.code === 200) {
									this.serviceDetails = res.data.worksheet;
									uni.showToast({
										title: '申请成功！'
									});
									uni.removeStorageSync("workSheetDetails")
								} else {
									uni.showToast({
										icon: 'error',
										title: res.detail
									});
								}
							})
						}
					}
				});
			},

			// 结束工作
			handleWorksheetEnd() {

			}
		}
	}
</script>


<style lang="scss">
	.service-details-page {
		overflow: auto;
		margin: auto;
		position: fixed;
		left: 0;
		right: 0;
		background-color: #F2F3F7;
		padding: 10px 2.66vw;
		box-sizing: border-box;
		z-index: 99;

		.uni-list-item__container {
			justify-content: space-between;
		}

		.files {
			border: 1px solid #22A366;
			border-radius: 2px;
			text-align: right;

			.file {
				border-bottom: 1px solid #22A366;
				padding: 6px;

				text {
					text-decoration: underline;
					color: #22A366;
				}

				&:last-child {
					border: none;
				}
			}
		}

		.submit {
			width: 100%;
			height: auo;
			margin-top: 10px;

			.btn-submit {
				width: 94.67vw;
				height: 45px;
				background: #22A366;
				border-radius: 8px;
				color: #fff;
				font-weight: 400;
				font-size: 17px;
			}
		}


		.popup {
			background: #fff;
			border-radius: 16px 16px 0 0;
			padding: 14px 16px;

			&-h {
				width: 100%;
				height: 27px;
				line-height: 27px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tit {
					font-weight: 600;
					font-size: 16px;
					color: #131315;
					height: 50px;
					line-height: 50px;
					display: flex;

					.btn {
						font-weight: 400;
						font-size: 16px;
						color: #161616;
						margin-right: 30px;
						position: relative;

						&.active {
							color: #22A366;
							font-weight: 600;

							&::after {
								display: inline-block;
								content: '';
								width: 16px;
								height: 3px;
								background: #22A366;
								border-radius: 2px;
								position: absolute;
								left: 0;
								right: 0;
								bottom: 8px;
								margin: auto;
							}
						}
					}
				}

				.close {
					width: 16px;
					height: 16px;
					line-height: 16px;
					border-radius: 100%;
					color: #9A9FB3;
					margin: initial;
					padding: 0;
					text-align: center;
				}
			}

			&-b {
				padding: 14px 0;

				.video {
					width: 100%;
				}
			}
		}
	}
</style>